<template>

    <top-nav></top-nav>

    <n-grid x-gap="12" :cols="4">
        <n-gi v-for="(item, index) in blog.list" :key="index">
            <n-card :title="item.blog_title" class="blog-card" @click="toBlogDetail(item.blog_id)">
                <template #cover>
                    <!-- <img src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"> -->
                </template>
                {{ item.blog_abstract }}
            </n-card>
        </n-gi>
    </n-grid>

</template>

<script setup>
import { reactive, ref, inject, onMounted } from 'vue';
import { epStore } from "../common/store.js";
import { storeToRefs } from "pinia";
import { NCard, NGi, NGrid, NDivider } from "naive-ui"
import { useRouter, useRoute } from 'vue-router'
import TopNav from "./TopNav.vue"

const axios = inject("axios")

const router = useRouter()


const store_data = epStore()
let { token } = storeToRefs(store_data)

const blog = reactive({
    list: ""
})

const getBlogs = async () => {
    let res_data = await axios.get(
        "/blog/"
    )
    blog.list = res_data.data.rows
}

const toBlogDetail = async (blog_id) => {
    // console.log(blog_id);
    await router.push(`/detail/?blog_id=${blog_id}`)
}

onMounted(() => {
    getBlogs()
})

</script>

<style scoped>
/* .blog-card {
    height: 400px;
    background-color: rgba(0, 128, 0, 0.12);
} */
</style>